{% raw %}


<style type="text/css" media="screen">

    .alert {
        margin: 5px;
        padding: 5px;
    }

    @media (max-width: 1200px) {
        .modal-dialog {
            width: 90%;
            max-width: 100%;
            height: auto;
            max-height: 100%;
            overflow: auto;
        }
    }

    @media (min-width: 1200px) {
        .modal-dialog {
            width: 90%;
            max-width: 100%;
            height: auto;
            max-height: 100%;
            overflow: auto;
        }
    }

</style>


<div class="wrapper wrapper-content animated fadeInRight">

    <div class="row">

        <div class="col-sm-12">

            <div class="ibox">

                <div class="ibox-title">
                    <h5>
                        <div class="ibox-tools pull-left">
                            <!--<button type="button" class="btn btn-primary btn-xs" ng-click="add()" data-toggle="modal"-->
                            <!--href="#modal-form">-->
                            <!--添加实例-->
                            <!--</button>-->


                        </div>
                    </h5>

                </div>
                <div class="ibox-content">

                    <div class="project-list">
                        <div class="bootstrap-table">
                            <div class="fixed-table-toolbar">
                                <div class="bars pull-left">
                                    <div class="btn-group hidden-xs" id="exampleTableEventsToolbar" role="group">
                                        <button type="button" id="loading-example-btn" class="btn btn-outline btn-default"
                                                ng-click="flush()"><i
                                                class="fa fa-refresh"></i> {{data_state}}
                                        </button>
                                        <button type="button" class="btn btn-outline btn-default" ng-click="add()"
                                                data-toggle="modal"
                                                href="#modal-form">
                                            <i class="glyphicon glyphicon-plus" aria-hidden="true"> </i>
                                        </button>
                                        <button type="button" class="btn btn-outline btn-default"
                                                ng-click="pre_batch_add()" data-toggle="modal"
                                                href="#batch_add">
                                            批量添加</i>
                                        </button>
                                        <button type="button" class="btn btn-outline btn-default"
                                                ng-click="batch_del()">
                                            <i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="fixed-table-container">
                                <div class="fixed-table-body">
                                    <table id="exampleTableEvents table table-hover" data-height="400"
                                           data-toggle="table"
                                           data-mobile-responsive="true"
                                           class="table table-hover">
                                        <thead>
                                        <tr>
                                            <th class="bs-checkbox " data-field="state"
                                                tabindex="0">
                                                <div class="th-inner "><input name="btSelectAll" type="checkbox"
                                                                              ng-click="check_all()" ng-model="master">
                                                </div>
                                                <div class="fht-cell"></div>
                                            </th>
                                            <!--<th style="" data-field="id" tabindex="0">-->
                                                <!--<div class="th-inner ">ID</div>-->
                                                <!--<div class="fht-cell"></div>-->
                                            <!--</th>-->
                                            <th style="" data-field="name" tabindex="0">
                                                <div class="th-inner ">名称</div>
                                                <div class="fht-cell"></div>
                                            </th>
                                            <th style="" data-field="name" tabindex="0">
                                                <div class="th-inner ">ServerID</div>
                                                <div class="fht-cell"></div>
                                            </th>
                                            <th style="" data-field="name" tabindex="0">
                                                <div class="th-inner ">类型</div>
                                                <div class="fht-cell"></div>
                                            </th>
                                            <th style="" data-field="name" tabindex="0">
                                                <div class="th-inner ">实例号</div>
                                                <div class="fht-cell"></div>
                                            </th>
                                            <th style="" data-field="name" tabindex="0">
                                                <div class="th-inner ">业务</div>
                                                <div class="fht-cell"></div>
                                            </th>
                                            <th style="" data-field="name" tabindex="0">
                                                <div class="th-inner ">操作</div>
                                                <div class="fht-cell"></div>
                                            </th>

                                        </tr>
                                        </thead>

                                        <tbody>
                                        <tr>
                                            <th>
                                            </th>
                                            <!--<th>-->

                                            <!--</th>-->
                                            <th>
                                                <div>
                                                    <input type="text" ng-model="search_name"
                                                           ng-keypress="($event.charCode==13)?get_instances(1):return"/>
                                                </div>
                                            </th>
                                            <th>
                                                <div>
                                                    <input type="text" ng-model="search_server_id"
                                                           ng-keypress="($event.charCode==13)?get_instances(1):return"/>
                                                </div>

                                            </th>
                                            <th>
                                                <div style="width: 100px;">
                                                    <input type="text" ng-model="search_backup_type"
                                                           style="width: 100px;"
                                                           ng-keypress="($event.charCode==13)?get_instances(1):return"/>
                                                </div>

                                            </th>
                                            <th>
                                                <div style="width: 100px;">
                                                    <input type="text" ng-model="search_instance" style="width: 100px;"
                                                           ng-keypress="($event.charCode==13)?get_instances(1):return"/>
                                                </div>

                                            </th>
                                            <th>
                                                <div>
                                                    <input type="text" ng-model="search_business"
                                                           ng-keypress="($event.charCode==13)?get_instances(1):return"/>
                                                </div>

                                            </th>
                                            <th>
                                                <div style="width: 270px;">
                                                    <button ng-click="get_instances(1)" type="button"
                                                            id="loading-example-btn"
                                                            class="btn btn-white btn-sm"><i
                                                            class="fa fa-refresh">搜索</i>
                                                    </button>
                                                </div>
                                            </th>

                                        </tr>
                                        <tr ng-repeat="instance in instances track by $index">
                                            <td class="bs-checkbox">
                                                <input name="btSelectItem" type="checkbox"
                                                       id="{{'instance'+instance.id}}" ng-checked="master"
                                                       ng-click="check($index)"></td>
                                            <!--<td style="">{{instance.id}}</td>-->
                                            <td style=""><span class="alert alert-success">{{instance.name}}</span></td>
                                            <td style=""><span class="label label-info">{{instance.server_id}}</span>
                                            </td>
                                            <td style=""><span
                                                    class="label label-waring">{{instance.backup_type.name}}</span></td>
                                            <td style=""><span class="label label-white">{{instance.instance}}</span>
                                            </td>
                                            <td style=""><span
                                                    class="label label-primary">{{instance.business.name}}</span></td>
                                            <td style="">
                                                <button class="btn btn-info btn-sm" data-toggle="modal"
                                                        href="#modal-form"
                                                        ng-click="update(instance)">
                                                    <i class="fa fa-pencil"></i>编辑
                                                </button>
                                                <button class="btn btn-danger btn-sm" ng-click="delete(instance)">
                                                    <i class="fa fa-pencil"></i>删除
                                                </button>

                                    <span class="btn-group">
                                        <button ng-click="get_backup_list(instance.server_id,instance.instance,instance.backup_type.name)"
                                                data-toggle="modal"
                                                data-target="#myModal"
                                                type="button" class="btn btn-sm btn-success"
                                        >
                                            备份列表
                                        </button>
                                        <!--<div class="dropdown-menu"-->
                                        <!--style="background-color: #e7eaec;overflow:auto;height: 400px; width:auto; z-index:10000000;">-->


                                        <!--<li ng-repeat="backup in backup_list">-->
                                        <!--<a href="#">-->
                                        <!--<div class="col-sm-11 no-top-border">-->

                                        <!--<p>-->
                                        <!--状态-->
                                        <!--<span class="m-b-xs label label-success"><strong>{{backup.succeed}}</strong></span>-->
                                        <!--存储:-->
                                        <!--<span class="m-b-xs label"><strong>{{backup.back_server_ip}}</strong></span>-->
                                        <!--IP:-->
                                        <!--<span class="m-b-xs label label-info"><strong>{{backup.game_server_ip}}</strong></span>-->
                                        <!--备份时间:-->
                                        <!--<span class="m-b-xs label label-info"><strong>{{backup.create_time|-->
                                        <!--date:'yyyy-MM-dd HH:mm:ss'}}</strong></span>-->
                                        <!--文件名:-->
                                        <!--<span class="m-b-xs label label-info"><strong>{{backup.filename}}</strong></span>-->
                                        <!--全备时间:-->
                                        <!--<span class="m-b-xs label label-info"><strong>{{backup.last_all_time-->
                                        <!--| date:'yyyy-MM-dd HH:mm:ss'}}</strong></span>-->
                                        <!--全备文件名:-->
                                        <!--<span class="m-b-xs label label-info"><strong>{{backup.last_all_filename}}</strong></span>-->

                                        <!--日志:-->
                                        <!--<span class="m-b-xs label label-danger"><strong>{{backup.log}}</strong></span>-->
                                        <!--</p>-->

                                        <!--</div>-->
                                        <!--</a>-->
                                        <!--</li>-->
                                        <!--</div>-->
                                    </span></td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="fixed-table-footer" style="display: none;">
                                    <table>
                                        <tbody>
                                        <tr></tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="fixed-table-pagination" style="display: block;">
                                    <div class="pull-left pagination-detail">
                                        <span class="pagination-info">总共 {{page.num_results}} 条记录</span>
                                        <span class="page-list">每页显示
                                            <span class="btn-group dropup">
                                        <button type="button" class="btn btn-default  btn-outline dropdown-toggle"
                                                data-toggle="dropdown">
                                            <span class="page-size">{{page.num_per_page}}</span>
                                            <span class="caret"></span>
                                        </button>
                                        <ul
                                                class="dropdown-menu" role="menu">
                                            <li class="active" ng-click="page.num_per_page=10;get_instances(1) ">
                                                <a>10</a>
                                            </li>
                                            <li ng-click="page.num_per_page=20;get_instances(1)"><a>25</a></li>
                                            <li ng-click="page.num_per_page=50;get_instances(1)"><a>50</a></li>
                                            <li ng-click="page.num_per_page=200;get_instances(1)"><a>200</a></li>
                                            <li ng-click="page.num_per_page=500;get_instances(1)"><a>500</a></li>
                                            <li ng-click="page.num_per_page=1000;get_instances(1)"><a>1000</a></li>
                                        </ul>

                                    </span>条记录</span></div>
                                    <div class="pull-right pagination">
                                        <ul class="pagination pagination-outline">
                                            <li class="page-first " ng-click="get_instances(1)"><a>«</a></li>
                                            <li class="page-pre" ng-click="get_instances(page.page-1)"><a>‹</a>
                                            </li>
                                            <li ng-if="page.page > 3" class="page-number"
                                                ng-click="get_instances(page.page-3)"><a>{{ page.page-3}}</a></li>
                                            <li ng-if="page.page > 2" class="page-number"
                                                ng-click="get_instances(page.page-2)"><a>{{ page.page-2}}</a></li>
                                            <li ng-if="page.page > 1" class="page-number"
                                                ng-click="get_instances(page.page-1)"><a>{{ page.page-1}}</a></li>
                                            <li class="page-number active" ng-click="get_instances(page.page)"><a>{{
                                                page.page }}</a></li>
                                            <!--<li class="page-number"><a>...</a></li>-->
                                            <li ng-if="page.total_pages - page.page > 0" class="page-number"
                                                ng-click="get_instances(page.page+1)"><a>{{ page.page+1 }}</a></li>
                                            <li ng-if="page.total_pages - page.page > 1" class="page-number"
                                                ng-click="get_instances(page.page+2)"><a>{{ page.page+2 }}</a></li>
                                            <li ng-if="page.total_pages - page.page > 2" class="page-number"
                                                ng-click="get_instances(page.page+3)"><a>{{ page.page+3 }}</a></li>
                                            <li class="page-next" ng-click="get_instances(page.page+1)"><a>›</a></li>
                                            <li class="page-last" ng-click="get_instances(page.total_pages)"><a>»</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <table class="table table-hover">


                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<div id="modal-form" class="modal fade in" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div class="ibox-title">
                    <h5>添加备份实例</h5>
                </div>
                <div class="ibox-content">
                    <form class="form-horizontal m-t" id="commentForm" novalidate="novalidate" name="myForm">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">名称</label>
                            <div class="col-sm-8">
                                <input id="name" name="name" ng-model="name" type="text" class="form-control"
                                       required=""
                                       aria-required="true"/>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">server_id</label>
                            <div class="col-sm-8">
                                <input id="sid" name="sid" ng-model="server_id" type="text" class="form-control"
                                       required=""
                                       aria-required="true"/>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">分类</label>
                            <div class="col-sm-8">

                                <select ng-model="select_backup_type" class="js-example-basic-single"
                                        style="width: 100px;margin-top: 10px;"
                                        ng-options="backup_type.name for backup_type in backup_type_list track by backup_type.id">
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">实例号</label>
                            <div class="col-sm-8">
                                <input id="instance" name="instance" ng-model="instance" type="text"
                                       class="form-control" required=""
                                       aria-required="true" placeholder="例如mysql 3306,3308 ..."/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">业务</label>
                            <div class="col-sm-8">

                                <select class="js-example-basic-single" style="width: 200px;margin-top: 10px;"
                                        ng-model="select_business"
                                        ng-options="business.name for business in business_list track by business.id">
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-4 col-sm-offset-3">
                                <button class="btn btn-primary" type="button" data-dismiss="modal"
                                        ng-click="addsubmit()">
                                    提交
                                </button>
                                <button class="btn btn-primary" type="button"
                                        ng-click="addsubmit()">
                                    TEST
                                </button>

                            </div>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" style="width: auto;"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close"
                        data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    ServerID:{{backup_server_id}},类型:{{backup_backup_type}},实例号:{{backup_instance}} 备份实例列表(显示最后480个备份)
                </h4>
            </div>
            <div class="modal-body">
                <center>
                    <table class="table table-striped table-condensed center" style="width: auto; ">
                        <thead>
                        <tr>
                            <th>状态</th>
                            <th>存储IP</th>
                            <th>客户端IP</th>
                            <th>备份时间</th>
                            <th>Rsync时间</th>
                            <th>备份名称</th>
                            <th>备份大小</th>
                            <th>全备时间</th>
                            <th>全备名称</th>
                            <th>日志</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-class="{true: 'success', false: 'danger'}[backup.succeed==1]"
                            ng-repeat="backup in backup_list">
                            <td>{{backup.succeed == 1 && '成功' || '失败'}}</td>
                            <td>{{backup.back_server_ip}}</td>
                            <td>{{backup.game_server_ip}}</td>
                            <td>{{backup.create_time | date:'MM-dd HH:mm'}}</td>
                            <td>{{backup.rsync_time | date:'MM-dd HH:mm'}}</td>
                            <td>{{backup.filename}}</td>
                            <td>{{backup.size | bytes}}</td>
                            <td>{{backup.last_all_time | date:'MM-dd HH:mm'}}</td>
                            <td>{{backup.last_all_filename}}</td>
                            <td>{{backup.log}}</td>
                        </tr>
                        </tbody>
                    </table>
                </center>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">关闭
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<div id="batch_add" class="modal fade in" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div class="ibox-title">
                    <h5>添加备份实例</h5>
                </div>
                <div class="ibox-content">
                    <form class="form-horizontal m-t" id="commentForm" novalidate="novalidate" name="myForm">
                        <div class="form-group">
                            <div class="col-sm-12">
                                <span>格式:</span><br>
                                <span>名称 ServerID 类型ID 实例号 业务ID</span><br>
                                <span>举3个栗子:</span><br>
                                <span>用户中心DB1 2437894 2 3306 0</span><br>
                                <span>百度S2区 343f895 4 redis 31</span><br>
                                <span>IOS集群NO.1 4437892 2 3308 94</span>
                                <textarea id="batch_str" name="name" ng-model="batch_add_str" type="text"
                                          class="form-control" required="" aria-required="true"/>
                            </div>
                            <div class="col-sm-12">
                                <br>

                                <span class="label label-danger">格式不正确:{{illegal_lines.length}}个</span>
                                <ul class="alert alert-danger">
                                    <li ng-repeat="i in illegal_lines track by $index">条目:{{i.item}},原因:{{i.reason}}
                                    </li>
                                </ul>

                                <span class="label label-warning">失败:{{fail_instance.length}}</span>
                                <ul class="alert alert-warning">
                                    <li ng-repeat="i in fail_instance track by i.index">{{i.line}},原因:{{i.reason}}</li>
                                </ul>

                                <span class="label label-success">成功:{{success_instance.length}}</span>
                                <ul class="alert alert-success">
                                    <li ng-repeat="i in success_instance track by i.index">{{i.line}}</li>
                                </ul>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-4 col-sm-offset-3">
                                <button class="btn btn-primary" type="button"
                                        ng-click="batch_add()">
                                    提交
                                </button>
                                <button class="btn btn-primary" type="button" data-dismiss="modal"
                                        ng-click="batch_add()">
                                    关闭
                                </button>

                            </div>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function () {
        $(".js-example-basic-single").select2();
    });
</script>
{% endraw %}
